<template>
	<view class="content">
		<navTop :title="navtop.title" :isHeight="false" hasBgc="#fff" :tipsShow="false" :color="navtop.color" :isBack="true" ></navTop>
		<view class="content-top" :style="{paddingTop:barHeight+'rpx'}">
			<view class="content-top__title">
				<view class="content-top__item" :class="{'active' : active == i }" v-for="(v, i) in titleList" :key="i" @click="changeModel(v, i)">
					{{v.name}}
				</view>
			</view>
		</view>
		<view class="content-list" v-show="active == 0">
			<view class="content-item" v-for="(v, i) in squareList0" :key="i" @click="gotoPage(v, active)">
				<view class="content-list__title">
					<view class="flex-l">
						<image :src="v.accountHead" mode="aspectFit" class="content-list__title-img"></image>
						<view>
							<view>{{v.accountName || ''}}</view>
							<text class="content-list__title-time">{{v.tips}}</text>
						</view>
					</view>
					<view class="b-waiting">
						Waiting
					</view>
				</view>
				<view class="content-list__text">
					{{v.content || ''}}
				</view>
				<view class="content-list__imgs">
					<image :src="item.imgUrl" mode="aspectFit" class="content-list__imgs-item" v-for="(item, index) in v.imgList" :key="index" @click.stop="searchImg(index, v.imgList)">
					</image>
				</view>
			</view>
		</view>
		<view class="content-list" v-show="active == 1">
			<view class="content-item" v-for="(v, i) in squareList1" :key="i" @click="gotoPage(v, active)">
				<view class="content-list__title flex-l">
					<image :src="v.accountHead" mode="aspectFit" class="content-list__title-img"></image>
					<view>
						<view>{{v.accountName.accountName||''}}</view>
						<text class="content-list__title-time">{{v.tips}}</text>
					</view>
				</view>
				<view class="content-list__text">
					{{v.content || ''}}
				</view>
				<view class="content-list__imgs">
					<image :src="item.imgUrl" mode="aspectFit" class="content-list__imgs-item" v-for="(item, index) in v.imgList" :key="index" @click.stop="searchImg(index, v.imgList)">
						
					</image>
				</view>
				<view class="content-list__btns" @click.stop="addLike(v)">
					<image :src="v.isLike ? like : notLike" mode="" class="content-list__btns-img"></image>
					<text>{{v.likes || 0}}</text>
				</view>
			</view>
		</view>
		<view class="content-list" v-show="active == 2">
			<view class="content-item" v-for="(v, i) in squareList2" :key="i" @click="gotoPage(v, active)">
				<view class="content-list__title">
					<view class="flex-l">
						<image :src="v.accountHead" mode="aspectFit" class="content-list__title-img"></image>
						<view>
							<view>{{v.accountName || ''}}</view>
							<text class="content-list__title-time">{{v.tips}}</text>
						</view>
					</view>
					<view class="b-rejected">
						Rejected
					</view>
				</view>
				<view class="content-list__text">
					{{v.content || ''}}
				</view>
				<view class="content-list__imgs">
					<image :src="item.imgUrl"  mode="aspectFit" class="content-list__imgs-item" v-for="(item, index) in v.imgList" :key="index" @click.stop="searchImg(index, v.imgList)">
					</image>
				</view>
			</view>
		</view>
		<!-- <view class="send-btn" @click="gotoSend">
			<image :src="send" mode="" class="send-btn__img"></image>
		</view> -->
	</view>
</template>
<script>
import navTop from '@/components/nav-title.vue';

import banner from '@/static/home_active.png'
import like from '@/static/like.png'
import send from '@/static/send.png'
import notLike from '@/static/not-like.png'
	export default {
		components: {
			navTop
		},
		data() {
			return {
				banner,
				like,
				notLike,
				send,
				userInfo: {},
				barHeight: 0,
				active: 0,
				navtop: {
					title: 'my Posts',
					color: '#000'
				},
				titleList: [
					{
						name: 'Waiting'
					},
					{
						name: 'Published'
					},
					{
						name: 'Rejected'
					}
				],
				squareList0: [],
				squareList1: [],
				squareList2: []
			}
		},
		onLoad(e) {
			console.log(e)
			this.active = e.type
			this.getList()
		},
		created() {
			this.isBarHeight999().then((statusBarHeight)=>{
				this.barHeight = statusBarHeight + 140
			})
		},
		mounted() {
			this.userInfo = uni.getStorageSync("userInfo") || {}
		},
		methods: {
			changeModel(v, i) {
				this.active = i
				this.getList()
			},
			gotoSend() {
				uni.navigateTo({
					url: '/pages/square/send'
				});
			},
			gotoPage(v) {
				uni.navigateTo({
					url: `/pages/me/details?id=${v.id}&type=${this.active}`
				});
			},		
			searchImg(i, imgList) {
				imgList = imgList.map((v) => {
					return v.imgUrl
				})
				uni.previewImage({
					current:i, //预览图片的下标
					urls: imgList//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			getList() {
				this.$http('get', '/app/me/dynamic/list', {
					state: this.active,
					page: 1,
					limt: 99999
				}).then(res => {
					if (res.success) {
						res.data.forEach((v) => {
							v.tips = this.$utils.getTimerOff(v.createTime)
						})
						console.log(res.data,3333)
						this[`squareList${this.active}`] = res.data
					}
				})
			},
			addLike(v) {
				this.$http('get', '/app/thumbs', {
					dynamicId: v.id
				}).then((res) => {
					if (res.success) {
						if (v.isLike == 1) {
							v.isLike = 0
							v.likes -= 1
						} else {
							v.isLike = 1
							v.likes += 1
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.content-top{
		background-color: #FBFCFE;
	}
	.content-top__title {
		margin-top: 12rpx 0 30rpx;
		padding: 30rpx 28rpx 0;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		.content-top__item {
			margin-right:40rpx;
			position: relative;
			color: rgba(31, 31, 31, 0.45);
			height: 80rpx;
		}
		.active{
			color: #1F1F1F;
		}
		.active::after {
			content: ' ';
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			transform: translate(-50%, 0);
			display: inline-block;
			margin-top: 20rpx;
			width: 48rpx;
			height: 8rpx;
			background-color: #0078FF;
		}
	}
.content-list {
	padding: 30rpx;
	box-sizing: border-box;
	padding-bottom: 160rpx;
	.content-item {
		background-color: #fff;
		padding: 32rpx 40rpx;
		box-sizing: border-box;
		.content-list__title {
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			font-size: 32rpx;
			font-family: Helvetica;
			color: #1F1F1F;
			margin-bottom: 8rpx;
		}
		.flex-l {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
		}
		.b-waiting {
			font-size: 24rpx;
			font-weight: 500;
			padding: 8rpx 14rpx;
			color: #FFAF43;
			background: rgba(255, 175, 67, 0.1);
			border-radius: 12px;
		}
		.b-rejected {
			font-size: 24rpx;
			font-weight: 500;
			padding: 8rpx 14rpx;
			color: #EF4042;
			background: rgba(239, 64, 66, 0.1);
			border-radius: 12px;
		}
		.content-list__text {
			margin: 32rpx;
			font-size: 30rpx;
			font-family: Helvetica;
			color: #1F1F1F;
		}
		.content-list__title-time {
			font-size: 22rpx;
			font-family: Helvetica;
			color: rgba(31, 31, 31, 0.45);
		}
		.content-list__title-img {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}
	}
}
.content-list__imgs {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	margin-bottom: 32rpx;
	.content-list__imgs-item {
		width: 190rpx;
		height: 190rpx;
		border-radius: 8rpx;
		margin-right: 18rpx;
		background-color: #000;
	}
}
.content-list__btns {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 28rpx;
	font-family: Helvetica;
	color: rgba(31, 31, 31, 0.45);
	.content-list__btns-img {
		width: 48rpx;
		height: 48rpx;
		margin-right: 8rpx;
	}
}
.send-btn{
	width: 88rpx;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #439BFF 0%, #0078FF 100%);
	box-shadow: 0px 4px 16px 0px rgba(0, 120, 255, 0.25);
	border-radius: 50%;
	position: fixed;
	right: 30rpx;
	bottom: 160rpx;
	.send-btn__img {
		width: 32rpx;
		height:32rpx
	}
}

</style>
